{extend name='table'}



{block name="content"}
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content">
     
        <table id="UserTable" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
    </div>
</div>
<script>
    $(function () {
        $('#UserTable').layTable({
            even: true, height: 'full',
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: '{:lang("Id")}', align: 'center', minWidth: 100},
                {field: 'class_id', title: '{:lang("班级")}', minWidth: 100, align: 'center', templet: function(d){
                    return d.classes && d.classes.name ? d.classes.name : '-';
                }},
                {field: 'user', title: '{:lang("用户")}', minWidth: 100, align: 'center', templet: function(d){
                    return d.user && d.user.full_name ? d.user.full_name : '-';
                }},
                {field: 'user', title: '{:lang("用户手机")}', minWidth: 100, align: 'center', templet: function(d){
                    return d.user && d.user.phone ? d.user.phone : '-';
                }},
                {field: 'description', title: '{:lang("内容")}', align: 'center'},
                {
                    field: 'images', 
                    title: '{:lang("图片")}', 
                    width: 150,  // 适当增加宽度以容纳多图
                    align: 'center', 
                    templet: '#imagesTpl',
                },
                {
                    field: 'video', 
                    title: '{:lang("视频")}', 
                    width: 150,  // 适当增加宽度以容纳多图
                    align: 'center', 
                    templet: '#videoTpl',
                },
                {
                    field: 'video', 
                    title: '{:lang("音频")}', 
                    width: 150,  // 适当增加宽度以容纳多图
                    align: 'center', 
                    templet: '#voiceTpl',
                },
                {field: 'create_time', title: '{:lang("创建时间")}', align: 'center', minWidth: 170, sort: true},
                {toolbar: '#toolbar', title: '{:lang("操作面板")}', align: 'center', minWidth: 180, fixed: 'right'}
            ]]
        });

        // 数据状态切换操作
        layui.form.on('switch(StatusSwitch)', function (obj) {
            var data = {id: obj.value, status: obj.elem.checked > 0 ? 1 : 0};
            $.form.load("{:url('state')}", data, 'post', function (ret) {
                if (ret.code < 1) $.msg.error(ret.info, 3, function () {
                    $('#UserTable').trigger('reload');
                }); else {
                    $('#UserTable').trigger('reload')
                }
                return false;
            }, false);
        });



        
    });
</script>
<script>
    function previewImage(url) {
        var index = layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            skin: 'layui-layer-nobg',
            shadeClose: true,
            content: '<div style="text-align:center;height:100%;display:flex;align-items:center;justify-content:center;">' +
                    '<img src="' + url + '" style="max-width:100%;max-height:100%;object-fit:contain;">' +
                    '</div>'
        });
    // 适配移动端
    layer.style(index, {
        'margin-top': $(window).height()/2 - $('#layui-layer'+index).height()/2 - 50 + 'px'
    });
}
</script>
<!-- 数据状态切换模板 -->
<script type="text/html" id="StatusSwitchTpl">
    <!--{if auth("state")}-->
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="{:lang('上架')}|{:lang('下架')}" lay-filter="StatusSwitch" {{-d.status>0?'checked':''}}>
    <!--{else}-->
    {{-d.status ? '<b class="color-green">{:lang("已上架")}</b>' : '<b class="color-red">{:lang("已下架")}</b>'}}
    <!--{/if}-->
</script>

<script type="text/html" id="imagesTpl">
    {{#  if(d.images.length > 0){ }}
        {{#  for(var i = 0; i < d.images.length; i++){ }}
            <img src="{{d.images[i]}}" style="width:50px;height:50px;margin-right:5px;" onclick="previewImage('{{d.images[i]}}')">
        {{#  } }}
    {{#  } else { }}
        -
    {{#  } }}

</script>


<script type="text/html" id="videoTpl">
    {{#  if(d.video){ }}
        <button class="layui-btn layui-btn-sm layui-btn-normal video-play-btn" 
                data-url="{{ d.video }}"
                style="margin: 0 auto; display: block;">
            <i class="layui-icon layui-icon-play"></i> 播放视频
        </button>
    {{#  } else { }}
        <span class="layui-badge layui-bg-gray">无视频</span>
    {{#  } }}
</script>


<script type="text/html" id="voiceTpl">
    {{# if(d.voice){ }}
        <button class="layui-btn layui-btn-sm layui-btn-primary audio-play-btn" 
                data-url="{{ d.voice }}"
                style="margin: 0 auto; display: block;">
            <i class="layui-icon layui-icon-voice"></i> 播放音频
        </button>
    {{# } else { }}
        <span class="layui-badge layui-bg-gray">无音频</span>
    {{# } }}
</script>


<script>
    layui.use(['layer', 'jquery'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;
        
        // 点击事件委托（适用于动态生成的元素）
        $(document).on('click', '.video-play-btn', function(){
            var videoUrl = $(this).data('url');
            
            layer.open({
                type: 1,
                title: '视频播放',
                closeBtn: 1,
                area: ['800px', '500px'], // 可根据需要调整
                shadeClose: true,
                content: '<div style="padding: 20px; text-align: center;">' +
                        '   <video controls autoplay style="width: 100%; height: 100%; max-height: 450px;">' +
                        '       <source src="'+ videoUrl +'" type="video/mp4">' +
                        '       您的浏览器不支持HTML5视频' +
                        '   </video>' +
                        '</div>',
                success: function(layero, index){
                    // 视频结束时关闭弹窗（可选）
                    layero.find('video').on('ended', function(){
                        layer.close(index);
                    });
                }
            });
        });

            // 音频播放
    $(document).on('click', '.audio-play-btn', function(){
        var audioUrl = $(this).data('url');
        
        layer.open({
            type: 1,
            title: '音频播放',
            closeBtn: 1,
            area: ['500px', '150px'], // 音频弹窗较小
            shadeClose: true,
            content: '<div style="padding: 20px; text-align: center;">' +
                    '   <audio controls autoplay style="width: 100%;">' +
                    '       <source src="' + audioUrl + '" type="audio/mpeg">' +
                    '       您的浏览器不支持音频播放' +
                    '   </audio>' +
                    '</div>'
        });
    })
        
    });
    </script>








<script type="text/html" id="toolbar">


    <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="{:lang('确定要永久删除吗？')}" data-action="{:url('remove')}" data-value="id#{{d.id}}">{:lang('删 除')}</a>

</script>
{/block}
